<!-- 新建流程公用组件 -->
<template>
  <div class="createNewProcess">
    <BasicModal
      v-bind="$attrs"
      title="选择流程模板"
      @register="register"
      @ok="handleSubmit"
      :destroyOnClose="true"
      :minHeight="450"
      :width="1200"
    >
      <BasicTable @register="registerTable">
        <!-- 创建时间 -->
        <template #createTime="{ text: createTime }">
          <span>
            {{ proxy.$filters.filterTime(createTime) }}
          </span>
        </template>
        <template #action="{ record }">
          <TableAction
            :actions="[
              {
                label: t('routes.demo.documentManager.select'),
                icon: 'ion:paper-plane-outline',
                onClick: handleSelect.bind(null, record),
              },
            ]"
          />
        </template>
      </BasicTable>
    </BasicModal>
  </div>
</template>

<script lang="ts" setup>
  import { ref, getCurrentInstance } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';

  import { getProcessColumn } from './data';
  import { getFileTypeAndFlowTypeTemplateList } from '/@/api/demo/document';

  import { useI18n } from '/@/hooks/web/useI18n';

  const { t } = useI18n();
  const { proxy }: any = getCurrentInstance();
  const flowList = ref([]);

  // 提交
  const handleSubmit = () => {
    closeModal();
  };

  // 选择模板
  const handleSelect = (record: Recordable) => {
    console.log(record);
  };

  // 初始化弹窗
  const [register, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ confirmLoading: false });
    getFileTypeAndFlowTypeTemplateList(data.record.type, '通知流程').then((res) => {
      flowList.value = res;
    });
  });

  // 表格初始化
  const [registerTable] = useTable({
    columns: getProcessColumn(),
    bordered: true,
    useSearchForm: false,
    showIndexColumn: false,
    showTableSetting: true, // 显示表格设置工具
    tableSetting: { fullScreen: true }, // 表格设置工具配置
    pagination: { pageSize: 5, pageSizeOptions: ['5', '10', '15', '20'], defaultPageSize: 5 },
    canResize: false,
    striped: false,
    dataSource: flowList,
    rowKey: 'id',
    actionColumn: {
      width: 250,
      fixed: 'right',
      title: t('common.action'),
      dataIndex: 'action',
      slots: { customRender: 'action' },
    },
  });
</script>

<style lang="less" scoped></style>
